<template>
  <div class="topic">
    <div class="left-topic-list">
      <div class="search-box">
        <div class="search-input"><el-icon><Search /></el-icon></div>
      </div>
      <div class="list-wrapper">
        <div class="topic-list-wrapper">
          <topic-item v-for="item in topic.list" :item = "item" @selectedItem = "selectedItem"></topic-item>
        </div>
      </div>
    </div>
    <chat class="topic-chat"></chat>
  </div>
</template>

<script lang="ts" setup>
import Chat from "@/views/chat.vue";
import {Search} from '@element-plus/icons-vue'
import TopicItem from "@/components/TopicItem.vue";
import topicStore from "@/stores/topic";
import {useRouter} from "vue-router";
import type Topic from "@/models/topic";
const topic = topicStore();
topic.loadTopicList();
const router = useRouter();
const selectedItem = (topicItem: Topic) => {
  topic.topic.topicId = topicItem.topicId;
  router.replace('/topics?topic_id=' + topicItem.topicId);
  for (const item of topic.list) {
    if(topicItem.topicId !== item.topicId) {
      item.isActive = false;
    }else{
      item.isActive = true;
    }
  }
}
</script>

<style lang="less" scoped>
.search-box {
  width: 100%;
  height: 8vh;
  display: flex;
  .search-input {
    border: 1px #F3F4F7 solid;
    padding: 6px 12px;
    background: #F3F4F7;
    border-radius: 7px;
    width: 172px;
    margin: auto;
    color: #D3D8DC;
    height: 4.5vh;
  }
}
.topic {
  display: flex;
  .left-topic-list {
    width: 20%;
    height: 100vh;
    border-right: 1px #EFF1F3 solid;
    .list-wrapper {
      height: 92vh;
      overflow-y: auto;
    }
  }
}
</style>